<template>
  <div>
    <h3>动态组件的演示</h3>
    <!-- 动态组件 => 多个组件使用同一个挂载点, 并可以动态的切换展示 -->
    <button
      v-for="item in list"
      :key="item.comName"
      @click="comName = item.comName"
    >
      swiper
    </button>
    <!-- 
        <my-nav></my-nav>
        <my-swiper></my-swiper> 
      -->
    <component :is="comName"></component>
  </div>
</template>

<script>
import MyNav from './components/my-nav.vue'
import MySwiper from './components/my-swiper.vue'
export default {
  data() {
    return {
      comName: 'my-nav',
      list: [
        {
          label: '切换nav',
          comName: 'MyNav',
        },
        {
          label: '切换SWIPERR',
          comName: 'MySwiper',
        },
      ],
    }
  },
  components: {
    MyNav,
    MySwiper,
  },
}
</script>
